<%@ include file="/WEB-INF/views/common/includes.jsp"%>
<head>
<script type="text/javascript">
	function addOpt() {
		var how = document.getElementById("how");
		var selectedHow = how.options[how.selectedIndex].text;
		var much = document.getElementById("much");
		var selectedMuch = much.options[much.selectedIndex].text;
		var ingredient = document.getElementById("ingredient");
		var selectedIngredient = ingredient.options[ingredient.selectedIndex].text;
		var style = document.getElementById("style");
		var selectedStyle = style.options[style.selectedIndex].text;

		var newIngredient = selectedHow + "/" + selectedMuch + "/"
				+ selectedIngredient + "/" + selectedStyle;

		var select = document.getElementById("myselect");
		select.options[select.options.length] = new Option(newIngredient);
	}
	
//delete from the selectbox 
	function removeItem(selectbox)
	{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	if(selectbox.options[i].selected)
	selectbox.remove(i);
	}
	}

	function selectAllOptions(id) {
		var ref = document.getElementById(id);
		
		for (i = 0; i < ref.options.length; i++)
			ref.options[i].selected = true;
	}
	
	function isNumberKey(evt){
	    var charCode = (evt.which) ? evt.which : evt.keyCode
	    return !(charCode > 31 && (charCode < 48 || charCode > 57));
	}
	
	function calc(A,B,SUM) {
		  var one = document.getElementById(A).value;
		  var two = document.getElementById(B).value; 
		  document.getElementById(SUM).value = parseInt(one) + parseInt(two);
		}


</script>
</head>
<body>
	<c:if test="${not empty param.success}">
		<c:if test="${param.success == true }">
			<div class="alert alert-success">
				<button type="button" class="close" data-dismiss="alert">
					<i class="icon-remove"></i>
				</button>
				<i class="icon-ok-sign"></i> You successfully added a <strong>derived
					recipe!</strong>
			</div>
		</c:if>

		<c:if test="${param.success == false }">
			<div class="alert alert-danger">
				<button type="button" class="close" data-dismiss="alert">
					<i class="icon-remove"></i>
				</button>
				<i class="icon-ok-sign"></i>You have not changed the <strong>recipe!</strong>
			</div>
		</c:if>
	</c:if>
	<section class="panel">
		<div class="panel-heading" style="padding: 8px 10px">
			<b>NEW DERIVATION</b>
		</div>
		<div class="panel-body">
			<form role="form" method="post" action="saveDerivedRecipe"
				enctype="multipart/form-data">

				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-6">
						<!-- default foto -->
						<img 
						src="../theme/images/default_food.jpg" alt="Nutty">
						<div class="form group" style="margin-bottom: 15px">
							<label class="control-label">Please select a file to
								upload :</label> <input type="file" class="form-control" name="file" />
						</div>
					</div>
					<div class="col-lg-6">
						<div class="row" style="margin-bottom: 15px">
							<div class="form group">
								<label class="control-label">Name</label> <input type="text"
									class="form-control" name="name" style="width: 70%;"
									value=<c:if test="${not empty recipename}"> 	
							<c:out value="${recipename}"/> </c:if>>
							</div>
						</div>
						<div class="row" style="margin-bottom: 15px">
							<div class="form group">
								<label class="control-label">TagList</label> <input type="text"
									class="form-control" style="width: 70%;"
									placeholder="Add a tag(add space between tags)" name="taglist">
							</div>
						</div>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="row font-bold">
						<h5 style="margin: 30px; font-weight: 600">Enter Ingredients:</h5>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-2">
						<div class="form group">
							<label class="control-label">Amount</label> <select id="how"
								class="form-control m-b">
								<option value="1" selected="selected">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
								<option value="11">15</option>
								<option value="12">20</option>
								<option value="13">25</option>
								<option value="14">50</option>
								<option value="15">75</option>
								<option value="16">100</option>
								<option value="17">125</option>
								<option value="18">150</option>
								<option value="19">250</option>
								<option value="20">500</option>
								<option value="21">750</option>
								<option value="22">1000</option>
								<option value="23">0.25</option>
								<option value="24">0.5</option>
								<option value="25">0.75</option>
							</select>
						</div>
					</div>
					<div class="col-lg-2">
						<div class="form group">
							<label class="control-label">Quantity</label>
							<c:if test="${not empty units}">
								<select id="much" class="form-control m-b">
									<c:forEach var="text" items="${units}">
										<option value="${text.name}">${text.name}</option>
									</c:forEach>
								</select>
							</c:if>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="form group">
							<label class="control-label">Name</label>
							<c:if test="${not empty ingredients}">
								<select id="ingredient" class="form-control m-b">
									<c:forEach var="text" items="${ingredients}">
										<option value="${text.name}">${text.name}</option>
									</c:forEach>
								</select>
							</c:if>
						</div>
					</div>
					<div class="col-lg-2">
						<div class="form group">
							<label class="control-label">Keyword</label>
							<c:if test="${not empty styles}">
								<select id="style" class="form-control m-b">
									<c:forEach var="text" items="${styles}">
										<option value="${text.name}">${text.name}</option>
									</c:forEach>
								</select>
							</c:if>
						</div>
					</div>
					<div class="col-lg-2">
						<a class="btn btn-warning btn-sm"
							style="margin-top: 22px; height: 34px" href="/createIngredient"><i
							class="icon-plus text"></i> <span class="text">Create
								Ingredient</span></a>

					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-12">
						<div class="btn-group btn-group-justified">
							<input type="button" class="btn btn-warning btn-xs"
								style="border-radius: 2px; width: 50%" onclick="addOpt()"
								id="addIngredient" value="Add Ingredient" /> <input
								type="button" class="btn btn-danger btn-xs"
								style="border-radius: 2px; width: 50%"
								onClick="removeItem(mydata)" id="removeIngredient"
								value="Delete Ingredient" />
						</div>
						<select class="form-control" id="myselect" name="mydata" multiple>
							<c:forEach var="text" items="${ingredientlist}">
								<option>${text}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-8" style="padding-left: 0px">
						<div class="col-lg-3">
							<label class="control-label">Preparation Time</label> <input
								class="form-control" type="number" value="0" id="prep"
								onchange="calc('prep','cook','result')"
								onkeypress="return isNumberKey(event);">
						</div>
						<div class="col-lg-1" style="margin-top: 30px; margin-left: 10px;">
							<i class="icon-plus text"></i>
						</div>
						<div class="col-lg-2">
							<label class="control-label">Cook Time</label> <input
								class="form-control" type="number" id="cook" value="0"
								onChange="calc('prep','cook','result')" name="cookTime" value=0
								onkeypress="return isNumberKey(event);">
						</div>
						<div class="col-lg-1" style="margin-top: 30px; margin-left: 10px;">
							<i class="icon-hand-right text"></i>
						</div>
						<div class="col-lg-4">
							<label class="control-label">Total Time</label> <input
								class="form-control" type="number" name="total" id="result"
								disabled>
						</div>
					</div>
					<div class="col-lg-2">
						<label class="control-label">Easiness</label> <select
							class="form-control" name="easiness">
							<option value="Easy" selected="selected">Easy</option>
							<option value="Medium">Medium</option>
							<option value="Hard">Hard</option>
						</select>
					</div>
					<div class="col-lg-2">
						<label class="control-label">Cost</label> <input
							class="form-control spinner-input" type="number" name="cost"
							value=0 max=5 onkeypress="return isNumberKey(event);">
					</div>
				</div>
				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-10">
						<label class="control-label">Description</label>
						<textarea class="form-control" name="description"
							style="height: 150px"><c:out
								value="${recipedescription}" />
						</textarea>
					</div>
				</div>

				<div class="row" style="margin-bottom: 15px">
					<div class="col-lg-9">
						<!-- 						bossss -->
					</div>
					<div class="col-lg-3 text-right">
						<input type="submit" class="btn btn-primary"
							value="Save Derived Recipe"
							onClick="selectAllOptions('myselect')" />
					</div>
				</div>
				<c:if test="${not empty param.recipeId}">
					<input type="hidden" value="${param.recipeId}" name="recipeId" />
				</c:if>
			</form>
		</div>
	</section>
</body>